<template>
  <div class="pay-select">
    <p class="please">提出问题<span class="tips" v-if="question.length > 150">不能超过150个字哦~</span></p>
    <div class="text-input">
      <textarea v-model="question" placeholder="请输入提问内容"></textarea>
      <span class="text-num">{{question.length}}/150</span>
    </div>
    <div class="pay-next">
      <x-button type="primary" :disabled="question.length == 0 || question.length > 150" @click.native="next">提交咨询</x-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      question: "",
      isMark: false
    };
  },
  computed: {
    uid() {
      return this.$store.state.userId;
    },
  },
  methods: {
    isLogin() {
      if (this.uid) {
        return true;
      } else {
        this.$vux.toast.text("请先登录");
        setTimeout(() => {
          this.$router.push({
            path: "/login",
            query: {
              redirect: this.$route.fullPath
            }
          });
        }, 2000);
      }
    },
    next() {
      if (!this.isLogin()) return;
      console.log('userPhone',this.$store.state.userPhone)
      if(this.$store.state.isMaster) return this.$vux.toast.text("暂不支持老师下单");
      if(!this.$store.state.userPhone) return this.$store.commit('showPhone', true);
      this.$http.fetchGet("saveFlashAnswer", {
        userId: this.uid,
        question: this.question,
      }).then(({ data }) => {
        console.log('提问下单', data);
        data && this.pay1(data);
      });
    },
    pay1(data) {
      this.$vux.toast.text('下单成功');
      setTimeout(() => {
        this.$router.push({
          path: '/pay',
          query: {
            step: 1,
            id: data.orderId,
            from: 'qa',
          }
        });
      }, 2000);
    }
  },
};
</script>

<style scoped lang="less">
.pay-select {
  .please {
    .f26;
    .padd(32, 20);
    display: flex;
    justify-content: space-between;
    .tips {
      color: #E73828;
    }
  }
  .text-input {
    margin: 0 0.266667rem;
    position: relative;
    textarea {
      outline: none;
      border: none;
      background-color: #fff;
      box-sizing: border-box;
      width: 100%;
      height: 5rem;
      border-radius: 0.133333rem;
      padding: 0.266667rem;
      font-size: .32rem;
    }
    .text-num {
      position: absolute;
      bottom: .266667rem;
      left: .266667rem;
      color: #999;
      font-size: .32rem;
    }
  }
  .pay-next {
    padding: 0.266667rem;
  }
}
</style>